<template>
   <div>
    <div><h2>主机名</h2></div>
    <div>
      <el-card class="box-card">
        <strong>主机目录</strong>
        <div>
          <el-table :data="NameData" stripe style="width: 100%">
            <el-table-column prop="name" label="主机名" width="180" align="center">
            </el-table-column>
            <el-table-column prop="Ipaddress" label="IP地址" align="center">
            </el-table-column>
          </el-table>
        </div>
        <!-- 添加按钮 -->
        <el-button class="add" size="medium">添加</el-button>
      </el-card>  
    </div>
    <el-divider></el-divider>
    <div style="text-align:right">
        <el-button class="use" size="medium">保存&应用</el-button>
        <el-button class="save" size="medium">保存</el-button>
        <el-button class="reset" size="medium">复位</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      NameData:[],
    };
  },

}
</script>

<style scoped>
.add {
  background: blueviolet;
  color: #fff;
  position: relative;
  top: 10px;
}
.use {
  background: slateblue;
  color: #fff;
}
.save {
  background: blueviolet;
  color: #fff;
}
.reset {
  background: springgreen;
  color: #fff;
}

</style>